<template>
  <b-card no-body>
    <b-container fluid>
      <b-row no-gutters>
        <b-col
          cols="6"
          class="img-wrapper justify-content-center justify-content-md-end"
        >
          <img :src="imgSrc" />
        </b-col>
        <b-col cols="6">
          <b-card-body>
            <b-card-title>{{ title }}</b-card-title>
            <b-card-text>{{ content }}</b-card-text>
          </b-card-body>
        </b-col>
      </b-row>
    </b-container>
  </b-card>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    content: {
      type: String,
      default: '',
    },
    date: {
      type: String,
      required: true,
    },
    imgSrc: {
      type: String,
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  background-color: transparent;
  border: none;
}
.img-wrapper {
  // max-width: 132px;
  display: flex;
  justify-content: flex-end;
  padding-right: 32px;
}
img {
  width: 132px;
  height: 88px;
}
.card-body {
  padding: 0;
}
.card-title {
  font-size: 16px;
  color: #000000;
  line-height: 22px;
  letter-spacing: 0.57px;
  margin-bottom: 0px;
}
.card-text {
  font-size: 13px;
  color: #9b9b9b;
  line-height: 18px;
  letter-spacing: 0.46px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 0px;
}
.news-date {
  font-size: 12px;
  color: #9b9b9b;
  line-height: 17px;
  letter-spacing: 0.5px;
  margin-bottom: 0px;
}
</style>
